<template>
  <div>
    <el-button plain icon="el-icon-plus" @click="add">新增</el-button>

    <el-input  style="width: 50%;" placeholder="请输入项目名称" v-model="pageVo.name">
      <el-select
      style="width: 150px;"
        v-model="pageVo.strength"
        slot="prepend"
        placeholder="项目强度"
      >
        <el-option label="项目强度" :value="null"></el-option>
        <el-option label="低" value="低"></el-option>
        <el-option label="中" value="中"></el-option>
        <el-option label="高" value="高"></el-option>
      </el-select>
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="info"
        >查询</el-button
      >
    </el-input>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="编码" prop="code" width="180">
        </el-table-column>
        <el-table-column label="项目名称" prop="name"> </el-table-column>
        <el-table-column prop="strength" label="项目强度"> </el-table-column>
        <el-table-column label="千步当量" prop="thousandstepequivalent">
        </el-table-column>
        <el-table-column label="运动时间" prop="movementtime">
        </el-table-column>
        <el-table-column label="年龄区间">
          <template slot-scope="scope">
            {{ scope.row.minage }}-{{ scope.row.maxage }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageVo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageVo.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageVo.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="删除运动项目"
      style="border-radius: 100px"
      :visible.sync="delvisible"
      width="25%"
    >
      <span><h4>确认删除嘛？</h4></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delvisible = false">取消</el-button>
        <el-button type="primary" @click="delsportsItemLibrary">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="dialog"
      title="新增项目运动"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        :model="sportsitemlibrary"
        :rules="rules"
        ref="sportsitemlibrary"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目编码" prop="code">
              <el-input
                class="inputForm"
                v-model="sportsitemlibrary.code"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input
                class="inputForm"
                v-model="sportsitemlibrary.name"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        
        <el-row>
          <el-col :span="12">
            <el-form-item label="运动强度" prop="strength">
              <el-select class="inputForm" v-model="sportsitemlibrary.strength">
                <el-option label="低" value="低"></el-option>
                <el-option label="中" valuve="中"></el-option>
                <el-option label="高" value="高"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

<el-col :span="12">
        <el-form-item label="运动时间" prop="movementtime">
          <el-input
            type="number"
            class="inputForm"
            v-model="sportsitemlibrary.movementtime"
          ></el-input>
        </el-form-item>
      </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">        
        <el-form-item label="适用性别" prop="applytogender">
          <el-select class="inputForm" v-model="sportsitemlibrary.applytogender">
            <el-option label="不限" :value="2"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="年龄下限" prop="minage">
          <el-input class="inputForm" type="number" v-model="sportsitemlibrary.minage"></el-input>
        </el-form-item>
      </el-col>
        </el-row>

        <el-row>
          <el-col :span="12"> 
        <el-form-item label="年龄上限" prop="maxage">
          <el-input class="inputForm" type="number" v-model="sportsitemlibrary.maxage"></el-input>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="千不当量" prop="thousandstepequivalent">
          <el-input
            type="number"
            class="inputForm"
            v-model="sportsitemlibrary.thousandstepequivalent"
          ></el-input>
        </el-form-item>
      </el-col>
        </el-row>

        <el-row>
          <el-col :span="12"> 
        <el-form-item label="拉伸部位" prop="tensileparts">
          <el-select class="inputForm" v-model="sportsitemlibrary.tensileparts">
            <el-option label="上肢" value="上肢"></el-option>
            <el-option label="下肢" valuve="下肢"></el-option>
            <el-option label="腰背" value="腰背"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="动作方法" prop="actionmethod">
          <el-input
            type="textarea"
            class="inputForm"
            :autosize="{ minRows: 2, maxRows: 8 }"
            v-model="sportsitemlibrary.actionmethod"
          ></el-input>
        </el-form-item>
      </el-col>
        </el-row>
        <el-form-item class="left-align">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            v-show="UpSport"
            @click="UpsportFun('sportsitemlibrary')"
            >确 定</el-button
          >
          <el-button
            type="primary"
            v-show="AddSport"
            @click="AddsportFun('sportsitemlibrary')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      pageVo: { name: null, page: 1, num: 10, strength: null, total: null },
      sportsitemlibrary: {
        id: null,
        code: null,
        name: null,
        strength: "低",
        thousandstepequivalent: null,
        movementtime: null,
        minage: null,
        maxage: null,
        applytogender: 1,
        tensileparts: "上肢",
        actionmethod: null,
      },
      delvisible: false,
      UpSport: false,
      AddSport: false,
      rules: {
        code: [{ required: true, message: "请输入项目编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        strength: [
          { required: true, message: "请输入运动强度", trigger: "blur" },
        ],
        thousandstepequivalent: [
          { required: true, message: "请输入千步当量", trigger: "blur" },
        ],
        movementtime: [
          { required: true, message: "请输入运动时间", trigger: "blur" },
        ],
        minage: [
          { required: true, message: "请输入年龄下限", trigger: "blur" },
        ],
        maxage: [
          { required: true, message: "请输入年龄上限", trigger: "blur" },
        ],
        actionmethod: [
          { required: true, message: "请输入动作方法", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    info() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .post("/rear/LYN/sportsItemLibraryInfo", this.pageVo)
        .then((req) => {
          loading.close();
          this.tableData = req.data.list;
          this.pageVo.total = req.data.total;
        });
    },
    add() {
      this.dialogFormVisible = true;
      this.UpSport = false;
      this.AddSport = true;
      this.sportsitemlibrary = {
        applytogender: 1,
        tensileparts: "上肢",
        strength: "低",
      };
    },
    AddsportFun(formName) {
      if (
        parseFloat(this.sportsitemlibrary.minage) >
        parseFloat(this.sportsitemlibrary.maxage)
      ) {
        alert("年龄下限不能大于年龄下限");
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在新增中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });
          this.axios
            .post("/rear/LYN/addSportsItemLibrary", this.sportsitemlibrary)
            .then((req) => {
              loading.close();
              if (req.data > 0) {
                this.info();
                this.dialogFormVisible = false;
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    handleEdit(index, row) {
      this.AddSport = false;
      this.UpSport = true;
      this.dialogFormVisible = true;
      this.sportsitemlibrary = Object.assign({}, row);
    },
    UpsportFun(formName) {
      if (
        parseFloat(this.sportsitemlibrary.minage) >
        parseFloat(this.sportsitemlibrary.maxage)
      ) {
        alert("年龄下限不能大于年龄下限");
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "正在修改中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });
          this.axios
            .post("/rear/LYN/upSportsItemLibrary", this.sportsitemlibrary)
            .then((req) => {
              loading.close();
              if (req.data > 0) {
                this.info();
                this.dialogFormVisible = false;
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.pageVo.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.pageVo.page = val;
      this.info();
    },
    handleDelete(index, row) {
      this.delvisible = true;
      this.sportsitemlibrary.id = row.id;
    },
    delsportsItemLibrary() {
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/LYN/delSportsItemLibrary", {
          params: { id: this.sportsitemlibrary.id },
        })
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.delvisible = false;
            this.info();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
  created() {
    this.info();
  },
};
</script>
<style scoped>
.left-align {
  display: flex;
  justify-content: flex-end;
}

.inputForm {
  width: 300px;
}


.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog {
  border-radius: 15px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog__header {
  padding: 10px 20px 10px;
  background-color: #d3dce6;
}
</style>